<template>
  <div class="dashboard-container">
    <el-card class="welcome-card">
      <h2>欢迎来到后台管理系统！</h2>
      <p>{{ welcomeMessage }}</p>
    </el-card>

    <div class="stats-container">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-value">{{ userCount }}</div>
          <div class="stat-label">用户总数</div>
        </div>
        <div class="stat-icon">
          <i class="el-icon-user"></i>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-value">{{ roleCount }}</div>
          <div class="stat-label">角色总数</div>
        </div>
        <div class="stat-icon">
          <i class="el-icon-user-solid"></i>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-value">{{ permissionCount }}</div>
          <div class="stat-label">权限总数</div>
        </div>
        <div class="stat-icon">
          <i class="el-icon-lock"></i>
        </div>
      </el-card>
    </div>

    <div class="charts-container">
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>用户增长趋势</span>
          </div>
        </template>
        <div class="chart-content">
          <div ref="userGrowthChart" class="chart"></div>
        </div>
      </el-card>

      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>角色分布</span>
          </div>
        </template>
        <div class="chart-content">
          <div ref="roleDistributionChart" class="chart"></div>
        </div>
      </el-card>
    </div>
  </div>
  <!-- <el-button @click="handleChildData">获取子组件数据</el-button> -->
  <child ref="childRef" :modelValue="parentData" @update:modelValue="handleUpdate"></child>
</template>

<script setup lang="ts">
import { ref, onMounted, toRef, reactive, toRefs } from "vue";
import { useUserStore } from "@/store/modules/user";
import { count } from "console";
import child from "./components/child.vue";
import { provide } from "vue";

const userStore = useUserStore();
const userGrowthChart = ref<HTMLElement>();
const roleDistributionChart = ref<HTMLElement>();

provide('dataList',reactive([1,23,45,86,90,99]))

const childRef = ref(null)
const parentData = ref('AAAA')
const handleChildData = ()=>{
    // console.log(childRef.value.childData) // 子组件的数据
    childRef.value.childMethod() // 子组件的方法
}
const handleUpdate = (val)=>{
  parentData.value = 'SSS'
  console.log(val,'val---')
}

// 模拟数据
const userCount = ref(100);
const roleCount = ref(10);
const permissionCount = ref(50);

// 欢迎消息
const welcomeMessage = ref("");

// 格式化当前时间
const formatCurrentTime = () => {
  const now = new Date();
  const hours = now.getHours();

  if (hours < 6) return "夜深了，注意休息哦！";
  if (hours < 12) return "早上好，开始新的一天吧！";
  if (hours < 14) return "中午好，该吃午饭了！";
  if (hours < 18) return "下午好，继续加油！";
  return "晚上好，准备下班了吗？";
};

// 初始化图表数据
const initCharts = () => {
  // 在实际项目中，这里应该使用ECharts等图表库来渲染图表
  // 这里仅作为示例，实际项目中需要安装并引入相应的图表库
  if (userGrowthChart.value) {
    userGrowthChart.value.innerHTML =
      '<div style="text-align: center; padding: 40px 0;">用户增长趋势图表</div>';
  }
  if (roleDistributionChart.value) {
    roleDistributionChart.value.innerHTML =
      '<div style="text-align: center; padding: 40px 0;">角色分布图表</div>';
  }
};

// 组件挂载时初始化
onMounted(() => {
  welcomeMessage.value = formatCurrentTime();
  initCharts();
});
</script>

<style scoped lang="less">
.dashboard-container {
  padding: 20px 0;
  .welcome-card {
    margin-bottom: 20px;
    h2 {
      margin-bottom: 10px;
      color: #304156;
    }
    p {
      color: #606266;
    }
  }

  .stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
    .stat-card {
      display: flex;
      align-items: center;
      padding: 20px;
      .stat-content {
        flex: 1;
        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: #304156;
          margin-bottom: 5px;
        }
        .stat-label {
          color: #606266;
        }
      }
      .stat-icon {
        font-size: 32px;
        color: #409eff;
      }
    }
  }

  .charts-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    .chart-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .chart-content {
        height: 300px;
        .chart {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>